<template>
	<a-layout-content
			style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
		<right-top icon="2.png" :text="ruleNames" v-if="infoFlag">
			<a-tabs default-active-key="1" style="position: absolute;right: 40px;top: 22px;font-weight: 400;"
			        size="small"
			        @change="callback">
				<a-tab-pane key="1" tab="事件数据"></a-tab-pane>
				<a-tab-pane key="2" tab="统计分析" force-render></a-tab-pane>
			</a-tabs>
		</right-top>
		<!-- 镜像模态框 -->
		<a-modal class="modal-box4" v-model="visible5" title="镜像" width="1300px" @ok="hideModal5" ok-text="关闭"
		         style="height:200px" :cancel-button-props="{ style: { display: 'none' } }">

			<div style="overflow: unset;padding: 0px;height:564px">
				<iframe :src="mirrorUrl" style="height: 100%;width: 100%;" name="mirror"></iframe>
			</div>

		</a-modal>
		<div class="right-content" v-show="change==1" v-if="infoFlag">
			<!--第一块-->
			<div style="" class="divOne">
				<div style="width: 95%;display: flex;justify-content: space-around;align-items: center">
					<div style="width: 75%;padding-left: 5%;">
						<div
								style="font-size: 16px;font-weight: bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align: center;"
								id="infoTitle"
								:title=detail_value.title>{{ detail_value.title }}
						</div>
					</div>

					<div style="display: flex;width: 21%;">
						<!-- 情感极性 -->
						<img v-if="detail_value.emotionalPolarity==2" src="../../assets/images/system/jixing-zhong.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
						<img v-if="detail_value.emotionalPolarity==1" src="../../assets/images/system/jixing-zheng.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>
						<img v-if="detail_value.emotionalPolarity==3" src="../../assets/images/system/jixing-fu.png"
						     style="position: relative;margin: 0 5px;padding: 5px 5px;display: inline-block;margin-top: 4%"/>

						<img src="../../assets/images/generalDetection/6.png"
						     style="width: 20px;height: 20px;margin-top: 6%;"/>
						<span style="margin-top: 5%;font-size: 18px;margin-left: 1%;">{{ detail_value.number }}</span>
						<!-- 镜像 -->
						<img v-if="detail_value.mirrorAddress != null" title="镜像"
						     src="../../assets/images/system/jingxiang-1.png"
						     @click="jingxiang(detail_value.mirrorAddress)"
						     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;width: 25px;height:25px;margin-top: 5%;margin-left: 5%"/>
						<img v-else title="镜像" src="../../assets/images/system/jingxiang-2.png"
						     style="position: relative;margin: 0 5px;display: inline-block;cursor: pointer;;width: 25px;height:25px;margin-top: 5%;margin-left: 5%"/>
						<a-button style="width: 60px;margin-left: 3%;margin-top: 5%" @click="goHomePage">
							返回
						</a-button>
					</div>
				</div>
				<div style="width: 100%;height: 45%;margin-top: 1%;">
					<div style="display: flex;">
						<div style="width: 20%;margin-left: 6%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
						     :title="detail_value.informationSources">
							发布媒体：{{ detail_value.informationSources }}
						</div>
						<div style="width: 20%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
						     :title="detail_value.author">作者：{{ detail_value.author }}
						</div>
						<div style="width: 20%;">级别推断：
							<sapn style="color: #51AE43;" v-if="detail_value.levelInference==1">一般级别</sapn>
							<sapn style="color: #297BE9;" v-if="detail_value.levelInference==2">中等级别</sapn>
							<sapn style="color: #FF8746;" v-if="detail_value.levelInference==3">重要级别</sapn>
						</div>
						<div style="width: 20%;">
							发布时间：{{ detail_value.releaseTime }}
						</div>
						<div style="width: 20%;">
							<a style="color: #297BE9;"
							   :href="detail_value.url"
							   target="_blank">查看原文>></a>
						</div>
					</div>
					<div style="display: flex;margin-top: 1%">
						<div style="margin-left: 6%;width: 18.7%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							转发量：{{ detail_value.forwardVolume }}次
						</div>
						<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							评论量：{{ detail_value.commentVolume }}次
						</div>
						<div style="width: 18.8%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
							访问量：{{ detail_value.visitVolume }}次
						</div>
						<div>关键词：<span style="color: orange">{{ detail_value.keyword }}</span>
						</div>
					</div>
				</div>
			</div>

			<!--第二块-->
			<div style="padding-bottom: 3%;" class="divTwo">
				<div style="width: 85%;margin-left: 6%">
					<img :src=detail_value.img alt="" style="margin-left: 20%;margin-top: 2%">
					<div style="padding-top: 1%;line-height: 30px;" id="infoContent"><span
							style="padding-left: 3%"></span>{{ detail_value.content }}
					</div>
				</div>
			</div>


			<!--第三块-->
			<hr style="margin-left: 20px;margin-right: 20px;">
			<div>
				<div style="margin-left: 8%;color: #AEAEAE">
					声明：页面内容来源于网络，请以原网站为准对传播页面所致后果，本产品概不负责。
				</div>
				<div style="text-decoration: underline;color: #237FFD;margin-top: 2%;text-align: center;">
					相似信息列表{{ total }}
				</div>
				<div style="flex-direction: column;margin-top: 1%">
					<div style="display: flex;justify-content: space-around;width: 60%;height: 30px;margin-left: 15%"
					     v-for="(item,i) in similarlist">
                        <span
		                        style="width: 35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;"
		                        @click="similarInfo(item)" :title="item.title">{{ item.title }}</span>
						<span style="width: 20%;">{{ item.releaseMedia }}</span>
						<span style="width: 20%;">{{ item.releaseTime }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="right-content" v-show="change==1" v-if="similarInfoFlag">
			<similarListInfo v-bind:similarId="similarId" v-bind:parent="parentInfo"></similarListInfo>
		</div>
		<div class="right-content" v-show="change==2">
			<Statistics v-bind:commandIds="commandIds"></Statistics>
		</div>
	</a-layout-content>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {event_detail, getSimilarDetail, getSimilarList} from '@/api/generalDetection/generalDetetion'

import statistics from '@/views/generalDetection/generalDetectionStatistics.vue'
import similarListInfo from '@/views/generalDetection/similarListInfo.vue'

export default {
	name: "generalDetectionInfo",
	components: {
		left,
		rightTop,
		Statistics: statistics,
		similarListInfo: similarListInfo
	},
	data() {
		return {
			mirrorUrl: '',
			visible5: false,
			parentInfo: this,
			infoFlag: true,// 当前详情页
			similarInfoFlag: false,// 相似详情页
			detail_value: {
				url: undefined
			},//调用接口获取详情的值
			detail_id: undefined,//接受的id
			commandIds: undefined,//接收的ids
			ruleNames: undefined,
			change: 1,
			total: 0,
			similarlist: [], //相识列表数据
			similarId: null,// 相识列表详情id
			// flag:false,
		}
	},
	watch: {

		detail_id(n, o) { //n为新值,o为旧值;
			console.log('hahaha' + n)
			this.detail_id = n;
		},
		commandIds(n, o) { //n为新值,o为旧值;
			console.log('hahaha1' + n)
			this.commandIds = n;
		},
		ruleNames(n, o) { //n为新值,o为旧值;
			this.ruleNames = n;
		},
	},
	props: ['detail_id', 'commandIds', 'ruleNames'],
	methods: {
		hideModal5() {
			this.visible5 = false
		},
		jingxiang(url) {
			console.log(url);
			this.mirrorUrl = url;
			this.visible5 = true;

		},

		/*sample(){
				this.$message.success('样本标注添加成功');
		},
		keywords(){
				this.$message.success('关键词建议添加成功');
		},
		strategy(){
				this.flag = !this.flag;
		},*/


		// 相似列表
		similarInfo(item) {
			// this.infoFlag = false;
			// this.similarInfoFlag = true;
			// this.similarId = id;
			// 获取相识列表详情
			loading();

			setTimeout(() => {
				getSimilarDetail({
					id: item.id
				}).then(res => {
					this.detail_value = res.data

					var contents = this.detail_value.content;
					var keyword = this.detail_value.keyword;
					var title = this.detail_value.title;

					let split = keyword.split(",");
					let textContent = "";
					let textTitle = "";
					// 判断标题和文本是否有关键字
					for (let i = 0; i < split.length; i++) {
						if (i == 0) {
							var values = contents.split(split[i]);
							var values2 = title.split(split[i]);

							textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
							textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
						} else {
							var values = textContent.split(split[i]);
							var values2 = textTitle.split(split[i]);

							textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
							textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
						}
					}
					$("#infoContent").html(textContent);
					$("#infoTitle").html(textTitle);
				});

				// 详情相识列表
				getSimilarList({
					title: item.title
				}).then(res => {
					this.similarlist = res.data;
					this.total = res.data.length;
				});

				closeLoading();
			}, 1000);


			// this.$router.push({
			//     path:'/similarListInfo',
			//     query:{id:item.id}
			// })


		},
		goHomePage() {
			this.$emit("gohome", false)
		},

		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},

	},
	created() {

	},
	mounted: function () {
		let params = {
			commandId: this.commandIds,
			id: this.detail_id,
		};
		event_detail(params).then(res => {
			this.detail_value = res.data

			// 详情相识列表
			getSimilarList({
				title: this.detail_value.title
			}).then(res => {
				this.similarlist = res.data;
				this.total = res.data.length;
			});

			// base64解码
			this.detail_value.url = window.atob(this.detail_value.url)

			var contents = this.detail_value.content;
			var keyword = this.detail_value.keyword;
			var title = this.detail_value.title;

			let split = keyword.split(",");
			let textContent = "";
			let textTitle = "";
			// 判断标题和文本是否有关键字
			for (let i = 0; i < split.length; i++) {
				if (i == 0) {
					var values = contents.split(split[i]);
					var values2 = title.split(split[i]);

					textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
					textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
				} else {
					var values = textContent.split(split[i]);
					var values2 = textTitle.split(split[i]);

					textTitle = (values2.join('<span style="color:orange;">' + split[i] + '</span>'))
					textContent = ("<span style=\"padding-left: 3%\"></span>" + values.join('<span style="color:orange;">' + split[i] + '</span>'))
				}
			}
			$("#infoContent").html(textContent);
			$("#infoTitle").html(textTitle);
		});


	},


}
</script>

<style scoped lang="scss">
.modal-box4 /deep/ .ant-modal-body {
	min-height: 594px;
}

.modal-box4 /deep/ .ant-modal-content {
	height: 700px;
}

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	/*border: solid #F0F0F0 1px;*/
	/*text-align: center;*/
	/*padding-left: 1%;*/
	/*padding-right: 1%;*/
	/*margin-right: 1%;*/
	margin: 0 5px;
	color: black;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

.ant-list-pagination {
	position: absolute;
	left: 35%;
}

.ant-btn-primary {
	color: #ffffff;
}
</style>
